<template>
  <div class="app-container">
    <div class="option">
      <el-date-picker type="week" v-model="time" placeholder="请选择日期" format="yyyy 第 WW 周"></el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
      <el-button type="info" icon="el-icon-search" @click="onReset">重置</el-button>
      <!-- <el-button type="success" icon="el-icon-search" @click="onDerive"
        >导出</el-button
      > -->
    </div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
        <template slot-scope="{ $index }">
          {{ $index + 1 + (req.page - 1) * req.pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="routeName" label="线路名称" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="weight" label="权重" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="category" label="类别" align="center" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span v-if="row.category === 'ROAD'">道路</span>
          <span v-else-if="row.category === 'RIVER'">河道</span>
        </template>
      </el-table-column>
      <el-table-column prop="week" label="周数" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="segment" label="时间段" align="center"></el-table-column>
      <el-table-column prop="score" label="分数" align="center"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row }">
          <el-tag size="small" @click="onDetail(row)">查看</el-tag>
          <!-- <el-tag type="success" size="small" style="margin: 0 10px"
            >导出</el-tag
          >
          <el-tag type="danger" size="small">删除</el-tag> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- <Pagination
      v-show="total"
      :total="total"
      :page.sync="req.page"
      :limit.sync="req.pageSize"
      @pagination="getList"
    ></Pagination> -->

    <el-dialog :visible="visible" top="5vh" title="详情" :before-close="onClose">
      <div class="my-dialog">
        <el-card>
          <div class="title">道路信息</div>
          <div class="info">
            <div class="item">线路名称：{{ detail.routeName }}</div>
            <div class="item">权重：{{ detail.weight }}</div>
            <div class="item">
              类别：
              <span v-if="detail.category === 'ROAD'">道路</span>
              <span v-else-if="detail.category === 'RIVER'">河道</span>
            </div>
            <div class="item">周数：{{ detail.week }}</div>
            <div class="item">时间段：{{ detail.segment }}</div>
            <div class="item">分数：{{ detail.score }}</div>
          </div>
        </el-card>

        <el-card style="margin: 10px 0">
          <div class="title">整洁度趋势分析</div>
          <div class="chart-box">
            <div class="chart" ref="chartLineSJ"></div>
            <div class="chart" ref="chartLineFS"></div>
          </div>
        </el-card>

        <el-card>
          <div class="title">事件类型分析</div>
          <div class="chart" ref="chartLineType"></div>
        </el-card>

        <el-card style="margin-top: 10px">
          <div class="title">评分标准</div>
          <div class="desc">
            <span>评分范围：0-100分</span>
            <span>90-100分：非常整洁</span>
            <span> 70-89分：较为整洁</span>
            <span>50-69分：一般整洁</span>
            <span> 30-49分：较差</span>
            <span>0-29分：极差</span>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRouteWeekly } from "@/api/attendRoadScore";
import * as echarts from "echarts";

export default {
  data() {
    return {
      req: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      list: [],
      time: null,
      visible: false,
      detail: {},
    };
  },
  methods: {
    getList() {
      if (this.time) this.req.week = this.getISOWeek(this.time);
      else delete this.req.week;
      getRouteWeekly(this.req).then(({ data, total }) => {
        this.list = data || [];
        this.total = total || 0;
      });
    },
    onReset() {
      this.req = {
        page: 1,
        pageSize: 10,
      };
      this.getList();
    },
    getISOWeek(date) {
      // 创建一个新的日期对象，避免修改传入的 date 对象
      let d = new Date(
        Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
      );

      // 找到该年的第一个星期四
      d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));

      // 获取该年的第一天是哪一年
      const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));

      // 计算从该年的第一天到当前日期的天数差
      const weekNumber = Math.ceil(
        ((d - yearStart) / 86400000 + yearStart.getUTCDay() || 7) / 7
      );

      return weekNumber;
    },
    initChartLine(dom, name, xdata, ydata) {
      const chart = echarts.init(dom);
      chart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          data: [name],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xdata,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: name,
            type: "line",
            data: ydata,
          },
        ],
      });
    },
    initChartLineType(dom, data) {
      const chart = echarts.init(dom);
      chart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          right: "10%",
          top: "center",
          orient: "vertical",
        },
        series: [
          {
            center: ["40%", "50%"],
            radius: "80%",
            type: "pie",
            data: data.map((item) => {
              return {
                name: item.name,
                value: item.event,
              };
            }),
          },
        ],
      });
    },
    onDerive() {},
    onDetail(item) {
      if (item.desc) {
        this.detail = {
          ...item,
          ...JSON.parse(item.desc),
        };
        this.visible = true;
        setTimeout(() => {
          this.initChartLine(
            this.$refs.chartLineSJ,
            "事件",
            this.detail.events.map((i) => i.day),
            this.detail.events.map((i) => i.event)
          );
          this.initChartLine(
            this.$refs.chartLineFS,
            "分数",
            this.detail.events.map((i) => i.day),
            this.detail.events.map((i) => i.score)
          );
          this.initChartLineType(this.$refs.chartLineType, this.detail.types);
        }, 100);
        console.log(this.detail);
      } else {
        this.$message.warning("暂无数据");
      }
    },
    onClose() {
      this.detail = {};
      this.visible = false;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.option {
  padding-bottom: 20px;
  & > * {
    margin-right: 10px;
  }
}

::v-deep .my-dialog {
  .title {
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .info {
    display: flex;
    flex-wrap: wrap;
    .item {
      padding-bottom: 5px;
      flex: 0 0 50%;
    }
  }
  .chart-box {
    display: flex;
  }
  .chart {
    flex: 0 0 50%;
    height: 200px;
  }
  .desc {
    display: flex;
    justify-content: space-between;
  }
}
</style>